import React, { useState, useEffect } from "react";
import style from "./style.module.css";
import { NavLink,useNavigate } from "react-router-dom";
import api from "../../api/index";
import AntSwiper from "../../components/antSwiper/AntSwiper";
import Swiper from "../../components/swiper/Swiper";
import HotHouse from "../../components/hotHouse/HotHouse";
import {useSelector} from 'react-redux'
export default function Home() {
  //轮播容器
  const [banner, setBanner] = useState([]);
  //热门房源
  const [list, setList] = useState([]);
  const naviagte = useNavigate()
  //城市名称
  // const [cityname,setCityname] = useState('上海')
  //仓库数据
  const cityname = useSelector(state=>state.city.cityname)
  //跳转搜索界面--------------
  function goSearch(){
    naviagte('/search')
  }
  //轮播接口--------------------------------------------------
  async function getHomeBanner() {
    let res = await api.getBanner();
    console.log("轮播接口------", res.data);
    setBanner(res.data.banner);
  }
  //热门房源--------------------------------------------------
  async function getHomeHouse() {
    let res = await api.getHotHouse({city:cityname});
    console.log("热门房源-----", res.data);
    setList(res.data.list);
  }
  //生命周期函数 ---网络请求
  useEffect(() => {
    //轮播接口---
    getHomeBanner();
    //热门房源
    getHomeHouse();
  }, []);

  async function getval(){
    let res = await api.getHouseInfoo({id:100})
    console.log(res);
  }
  return (
    <div>
      {/* 顶部--搜索框 */}
      <div className={style.header}>
        <div className={style.location}>
          <NavLink to="/city">
            {cityname}<span className="iconfont icon-jiantou"></span>
          </NavLink>
        </div>
        <div className={style.center}>
          <div className={style.input} onClick={goSearch}></div>
        </div>
        <div className={style.shop} onClick={getval}>购物车</div>
      </div>

      {/* 轮播区域 */}
      <AntSwiper arr={banner} />
      {/* <Swiper arr={banner}/> */}

      {/* 舍友 社区 */}
      <div className={style.content}>
        <div className={style.item}>
          <NavLink to='/friend'>找舍友</NavLink>
        </div>
        <div className={style.item}>
          <NavLink to='/shequ'>宜居社区</NavLink>
        </div>
      </div>
      {/* 热门房源 */}
      <div className={style.list}>
        <h3>热门房源</h3>
        <HotHouse list={list}/>
      </div>
    </div>
  );
}
